import React,{useEffect,useState} from 'react'
import store from '../store'
import {incrementAction,subtractionAction} from '../store/actions/counterAction'
export default function Counter() {
  console.log('store-->state',store.getState());
  const [a,setA]=useState()
  useEffect(()=>{
    store.subscribe(()=>{
        console.log('------监听到了数据的变化--------');
        console.log('state',store.getState().counter);
        setA({})//为了让组件执行一次更新
    })
  })    
  /*
    将store仓库中state的值进行+1操作
    使用store中的dispatch方法来发送action通知对象
  */
  const increment=(n)=>{
    store.dispatch(incrementAction(n))
  }
  const subtraction=(n)=>{
    store.dispatch(subtractionAction(n))
  }

  return (
    <div>
        <h1>reudx计数器案例</h1>
        <h2>{store.getState().counter}</h2>
        <button onClick={()=>{increment(1)}}>+1操作</button>
        <button onClick={()=>{subtraction(1)}}>-1操作</button>
        <button onClick={()=>{increment(2)}}>+2操作</button>
    </div>
  )
}
